<template>
  <div>
    <h1>App</h1>
    <p>a:{{ a }}---b:{{ b }}</p>
    <button @click="addA">addA</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',

  /* 
    setup 函数是一个新的组件选项，所有的组合API函数都在此使用，作为在组件内使用 组合API 的入口点，只在初始化的时候执行一次
    本质上beforCreate和created两个生命周期函数的合并，无法使用this
    函数如果返回对象，对象中的属性或者是方法，模板中可以直接使用
    但是直接书写在setup函数的数据不是响应式数据，因为根本没有做响应式处理
 */
  setup() {
    let a = 1;
    const addA = () => {
      a++;
      console.log(a);
    };
    const b = 2;
    return { a, b, addA };
  },
});
</script>

<style></style>
